웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트에서 동일한 노드(엘리먼트)가 다수 필요한 경우 어떻게 하면 DOM에 효과적으로 그릴 수 있을까요? HTML을 반복 사용하는 것도 가능하지만 자바스크립트를 사용하여 cloneNode() 함수를 사용할 수 있습니다. cloneNode()는 쉽게 엘리먼트, 노드를 복제하여 줍니다. 아래에서 자세히 알아봅니다.
# 자바스크립트 cloneNode() 노드 복제하기
똑같은 노드를 복제하여 만들 수 있는 방법으로 자바스크립트의 cloneNode() 함수가 있습니다. cloneNode()는 엘리먼트를 DOM에 복제하여 붙여넣기를 하면 동일한 기능을 수행하므로 코드를 간결하고 쉽게 만들 수 있죠. 이 함수는 생산성을 높여주는 함수로 알아두면 매우 간단하게 코드 구현이 가능합니다. 아래는 간단한 사용방법입니다.원하는 노드.cloneNode();
위 함수는 test 변수에 특정 노드를 복제하여 저장합니다. 이 경우 선택 옵션 지정이 가능한데 옵션은 자식 노드를 함께 복사할 것인지 아니면 해당 요소만 복제할 것인지 결정할 수 있습니다.
! 자식 노드도 함께 clone 복제하는 방법
다시 말해서 자식 노드 역시 복제가 필요한 경우라면 true를 사용합니다. 기본값은 false로 자식 노드는 복사하지 않습니다. 만약 자식 노드가 필요한 경우 아래처럼 사용합니다.var test = Element.cloneNode(true);
위 방법은 옵션에 true를 사용해 자식 노드를 함께 복사한 방법입니다. 매개변수에 true를 추가했습니다. 그럼 아래는 간단한 예제를 통해 알아보겠습니다.
# cloneNode() 예제 소스 코드보기
간단하게 사격형의 스타일을 가지고 있는 test 요소(id값 cloneTest)를 복제해 연속된 3개의 정사각형을 만들어보려 합니다. 먼저 html입니다.@cloneNode.html
<body>
<div id="cloneTest"></div>
</body>
<div id="cloneTest"></div>
</body>
@cloneNode.css
#cloneTest {
margin: 1%;
width:36px;
height: 36px;
background: #000;
display: inline-block;
}
margin: 1%;
width:36px;
height: 36px;
background: #000;
display: inline-block;
}
마지막으로 스크립트 코드입니다.
var test = document.getElementById('cloneTest');
// test 변수에 복제 할 노드를 지정
var test1 = test.cloneNode();
var test2 = test.cloneNode();
var test3 = test.cloneNode();
// 복사할 개수만큼 복제변수를 생성
body.appendChild(test1);
body.appendChild(test2);
body.appendChild(test3);
// 복제된 변수 test1, 2, 3를 body에 삽입
// test 변수에 복제 할 노드를 지정
var test1 = test.cloneNode();
var test2 = test.cloneNode();
var test3 = test.cloneNode();
// 복사할 개수만큼 복제변수를 생성
body.appendChild(test1);
body.appendChild(test2);
body.appendChild(test3);
// 복제된 변수 test1, 2, 3를 body에 삽입
먼저 코드를 동작하기 전에는 아래와 같이 하나의 엘리먼트가 존재합니다.
이제 코드를 동작하면 아래와 같이 cloneNode()를 통해 동일한 엘리먼트가 추가로 생성되었습니다.
! cloneNode(true) 자식 노드를 함께 복제하는 예제보기
이번에는 자식 노드를 함께 복제(Clone)하는 경우의 예제입니다. cloneNode(true)를 사용합니다. 그럼 자식 노드의 생성 유무를 확인해보세요.@ cloneNode2.css
#cloneTest {
margin: 1%;
width:36px;
height: 36px;
background: #000;
display: inline-block;
}
#cloneTestSon {
margin: 1%;
width:12px;
height: 12px;
background: #fff;
display: inline-block;
}
margin: 1%;
width:36px;
height: 36px;
background: #000;
display: inline-block;
}
#cloneTestSon {
margin: 1%;
width:12px;
height: 12px;
background: #fff;
display: inline-block;
}
@ cloneNode2.html
<div id="cloneTest">
<div id="cloneTestSon"></div>
</div>
<div id="cloneTestSon"></div>
</div>
@ cloneNode2.js
var test = document.getElementById('cloneTest');
// test 변수에 복제 할 노드를 지정
var test1 = test.cloneNode(true);
// 자식 노드를 함께 복사하기 위해 true를 입력
body.appendChild(test1);
// 복제된 변수 test1을 body에 삽입
// test 변수에 복제 할 노드를 지정
var test1 = test.cloneNode(true);
// 자식 노드를 함께 복사하기 위해 true를 입력
body.appendChild(test1);
// 복제된 변수 test1을 body에 삽입
위 예제는 자식 요소도 함께 복사하는 예제코드입니다. test 변수에 사각형 요소를 저장하고 똑같은 요소을 추가하 것입니다. 다시 말하자면 true 매개변수를 꼭 함께 넘겨주어야합니다.
먼저 스크립트를 실행하기 전의 모습니다.
코드를 실행하면 자식 노드가 함께 복제되어 나타납니다.
여기까지 cloneNode()를 사용하여 노드를 복제하는 방법에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
